<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 使用设备的宽度作为视图宽度并禁止初始化的缩放，在<head>标签里加入这个meta标签
        width=device-width 宽度等于当前设备的宽度
        initial-scale:初始化的缩放比例
        maximum-scale:允许用户缩放到的最大比例
        user-scalable:用户是否可以手动缩放
        -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no " >
    <title>Document</title>
</head>
   <style>
     .layout{
       width: 300px;
       height: 300px;
       background-color: rgb(55, 248, 7);
     }
     @media screen and (max-width:768px){
        .layout{
            background-color: aqua;
        }
     }
     @media screen and (min-width:768px) and (max-width:996px) {
        .layout{
            background-color: blue;
        }
     }
      @media screen and (min-width:996px){
        .layout{
            background-color: red;
        }
     }


  </style>

<body>
   <div class="layout"></div>


   <span class="icon"></span>


    
</body>
</html>